@mixin font_text($text) {
    text-align: $text;
}

@mixin pull_left {
    float: left !important;
}

@mixin pull_right {
    float: right !important;
}

@mixin clearfix {
    display: block;
    height: 0;
    content: ' ';
    overflow: hidden;
    clear: both;
}

@mixin bg_image($url) {
    background-image: url($url);
    background-repeat: no-repeat;
    background-size: cover;
}

@mixin yScroll {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

@mixin fzcol($fz:16px, $col:#82A6C0, $opacity:1) {
    font-size: $fz;
    color: $col;
    opacity: $opacity;
}

@mixin box($top, $bot, $bcol:$bg_color) {
    padding: $top 0 $bot 0;
    // background-color: $bcol;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    @include yScroll();
}

@mixin over_text {
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
}

@mixin more_over($index:2) {
    display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    -webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
    -webkit-line-clamp: $index; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
}

@mixin fixedCom($top:0, $right:0, $bottom:0, $left:0) {
    position: fixed;
    top: $top;
    left: $left;
    right: $right;
    bottom: $bottom;
}

@mixin absoluteCom($top:0, $right:0, $bottom:0, $left:0) {
    position: absolute;
    top: $top;
    left: $left;
    right: $right;
    bottom: $bottom;
}

@mixin place ($fz:16px, $col:#fff) {
    &::-webkit-input-placeholder {
        color: $col;
        font-size: $fz;
    }
    &:-moz-placeholder {
        color: $col;
        font-size: $fz;
    }
    &:-ms-input-placeholder {
        color: $col;
        font-size: $fz;
    }
}

@mixin border-left ($px:1px, $col:#e6e6e6) {
    position: relative;
    &::after {
        content: '';
        position: absolute;
        left: 0;
        border-left: $px solid $col;
        box-sizing: border-box;
        height: 200%;
        transform: scale(0.5);
        transform-origin: left top;
    }
}

@mixin border-right ($px:1px, $col:#e6e6e6) {
    position: relative;
    &::after {
        content: '';
        position: absolute;
        right: 0;
        border-right: $px solid $col;
        box-sizing: border-box;
        height: 200%;
        transform: scale(0.5);
        transform-origin: left top;
    }
}

@mixin border-top ($px:1px, $col:#e6e6e6) {
    position: relative;
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border-top: $px solid $col;
        box-sizing: border-box;
        width: 200%;
        transform: scale(0.5);
        transform-origin: left top;
    }
}

@mixin border-bottom ($px:1px, $col:#e6e6e6) {
    position: relative;
    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        border-bottom: $px solid $col;
        box-sizing: border-box;
        width: 200%;
        transform: scale(0.5);
        transform-origin: left top;
    }
}

@mixin border ($px:1px, $col:#e6e6e6, $radius:0) {
    position: relative;
    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        top: 0;
        right: 0;
        border: $px solid $col;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        border-radius: $radius;
        transform: scale(0.5);
        transform-origin: left top;
    }
}

@mixin notice_height() {
    @media screen and (max-width: 300px) {
        height: 30px;
    }
    @media screen and (min-width:301px) and (max-width:350px) {
        height: 34px;
    }
    @media screen and (min-width:351px) and (max-width:420px) {
        height: 40px;
    }
    @media screen and (min-width:421px) and (max-width:490px) {
        height: 48px;
    }
    @media screen and (min-width:491px) and (max-width:620px) {
        height: 60px;
    }
    @media screen and (min-width:621px) and (max-width:720px) {
        height: 70px;
    }
    @media screen and (min-width:721px) and (max-width:820px) {
        height: 80px;
    }
    @media screen and (min-width:821px) and (max-width:920px) {
        height: 90px;
    }
    @media screen and (min-width:921px) and (max-width:1020px) {
        height: 100px;
    }
    @media screen and (min-width:1021px) and (max-width:1120px) {
        height: 110px;
    }
    @media screen and (min-width:1121px) and (max-width:1220px) {
        height: 120px;
    }
    @media screen and (min-width:1221px) and (max-width:1320px) {
        height: 130px;
    }
    @media screen and (min-width:1321px) and (max-width:1441px) {
        height: 140px;
    }
}

@mixin notice_line_height() {
    @media screen and (max-width: 300px) {
        line-height: 30px;
    }
    @media screen and (min-width:301px) and (max-width:350px) {
        line-height: 34px;
    }
    @media screen and (min-width:351px) and (max-width:420px) {
        line-height: 40px;
    }
    @media screen and (min-width:421px) and (max-width:490px) {
        line-height: 48px;
    }
    @media screen and (min-width:491px) and (max-width:620px) {
        line-height: 60px;
    }
    @media screen and (min-width:621px) and (max-width:720px) {
        line-height: 70px;
    }
    @media screen and (min-width:721px) and (max-width:820px) {
        line-height: 80px;
    }
    @media screen and (min-width:821px) and (max-width:920px) {
        line-height: 90px;
    }
    @media screen and (min-width:921px) and (max-width:1020px) {
        line-height: 100px;
    }
    @media screen and (min-width:1021px) and (max-width:1120px) {
        line-height: 110px;
    }
    @media screen and (min-width:1121px) and (max-width:1220px) {
        line-height: 120px;
    }
    @media screen and (min-width:1221px) and (max-width:1320px) {
        line-height: 130px;
    }
    @media screen and (min-width:1321px) and (max-width:1441px) {
        line-height: 140px;
    }
}